<template>
	<view>
		<view class="wrap-head">
			<view @click="isEdit = !isEdit">
				{{ isEdit ? "完成" : "管理" }}
			</view>
		</view>

		<view class="wrap">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="wrap-item">
						<view class="shop-bg">
							<view class="choose" @click="onShopChoose(index)">
								<image
									v-if="item.select"
									src="/static/cart/choose_select.png"
								/>
								<image v-else src="/static/cart/choose_normal.png" />
							</view>

							<image class="shop-img" />

							<view class="shop-name">{{ item.shop_name }}</view>
						</view>

						<view class="goods-list">
							<block
								v-for="(subItem, subIdx) in item.goods_list"
								:key="subIdx"
							>
								<view class="goods-item">
									<view
										class="choose"
										@click="onGoodsChoose(index, subIdx)"
									>
										<image
											v-if="subItem.select"
											src="/static/cart/choose_select.png"
										/>
										<image
											v-else
											src="/static/cart/choose_normal.png"
										/>
									</view>

									<image class="file" :src="subItem.image" />
								</view>
							</block>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="footer">
			<view class="choose" @click="onAllChoose">
				<image v-if="isAllChoose" src="/static/cart/choose_select.png" />
				<image v-else src="/static/cart/choose_normal.png" />
			</view>
			<view class="title"> 全选 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAllChoose: false,
				list: [],

				isEdit: false,
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			/**
			 * 选择店铺
			 */
			onShopChoose(index) {
				let isSelect = this.list[index].select;
				this.list[index].select = !isSelect;
				for (let i = 0; i < this.list[index].goods_list.length; i++) {
					this.list[index].goods_list[i].select = !isSelect;
				}
				console.log("AAAAAA", this.list, isSelect);
				this.$set(this.list);
				this.onCalculation();
			},
			/**
			 * 选择商品
			 */
			onGoodsChoose(index, subIdx) {
				this.list[index].goods_list[subIdx].select =
					!this.list[index].goods_list[subIdx].select;
				let count = 0;
				let total = this.list[index].goods_list.length;
				for (let i = 0; i < this.list[index].goods_list.length; i++) {
					if (this.list[index].goods_list[i].select == true) {
						count++;
					}
				}
				this.list[index].select = count === total;
				this.$set(this.list);
				this.onCalculation();
			},
			/**
			 * 全选
			 */
			onAllChoose() {
				this.isAllChoose = !this.isAllChoose;
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].select = this.isAllChoose;
					for (let j = 0; j < this.list[i].goods_list.length; j++) {
						this.list[i].goods_list[j].select = this.isAllChoose;
					}
				}
				this.$set(this.list);
			},
			/**
			 * 计算是否全选
			 */
			onCalculation() {
				console.log("AAAAAAAA");
				let total = 0;
				let choose = 0;
				for (let i = 0; i < this.list.length; i++) {
					for (let j = 0; j < this.list[i].goods_list.length; j++) {
						total++;
						if (this.list[i].goods_list[j].select == true) {
							choose++;
						}
					}
				}
				console.log("BBBBBB", choose, total);
				this.isAllChoose = choose === total;
			},
			/**
			 * 网络请求
			 */
			getData() {
				uni.request({
					url: "https://same.ascetic.top/api/wanlshop.cart/synchro",
					method: "POST",
					header: {
						token: "b60b9309-345f-45e9-9416-e75d20c7b9fd",
					},
					data: {
						cart: [],
					},
					success: (res) => {
						let list = [];
						for (let i = 0; i < res.data.data.length; i++) {
							let item = res.data.data[i];
							item.select = false;
							if (list.length == 0) {
								let obj = {
									shop_name: item.shop_name,
									shop_id: item.shop_id,
									select: false,
									goods_list: [],
								};
								obj.goods_list.push(item);
								list.push(obj);
							} else {
								let count = 0;
								let chooseIndx = -1;
								list.map((shopItem, shopIndx) => {
									if (shopItem.shop_id === item.shop_id) {
										chooseIndx = shopIndx;
									} else {
										count++;
									}
								});
								if (chooseIndx === -1) {
									let obj = {
										shop_name: item.shop_name,
										shop_id: item.shop_id,
										select: false,
										goods_list: [],
									};
									obj.goods_list.push(item);
									list.push(obj);
								} else {
									list[chooseIndx].goods_list.push(item);
								}
							}
						}
						this.list = list;
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f6f6f6;
	}
	.wrap-head {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		overflow: hidden;
		height: 100rpx;
		background: white;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		color: #333;
		font-size: 30rpx;
		z-index: 10;
	}
	.wrap {
		padding-top: 120rpx;
		width: 100%;
		padding-bottom: 120rpx;
		overflow: hidden;

		.wrap-list {
			width: 100%;
			overflow: hidden;

			.wrap-item {
				width: 100%;
				background: white;
				margin-bottom: 20rpx;
				&:last-child {
					margin-bottom: 0rpx;
				}

				.shop-bg {
					width: 100%;
					overflow: hidden;
					padding: 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.shop-img {
						margin-left: 20rpx;
						width: 60rpx;
						height: 60rpx;
						background: red;
					}
					.shop-name {
						margin-left: 20rpx;
						color: #333;
						font-size: 30rpx;
					}
				}

				.goods-list {
					width: 100%;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					overflow: hidden;

					.goods-item {
						width: 100%;
						margin-bottom: 20rpx;
						overflow: hidden;
						display: flex;
						align-items: center;

						.file {
							margin-left: 10rpx;
							width: 200rpx;
							height: 200rpx;
							background: green;
						}
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: white;
		display: flex;
		overflow: hidden;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		z-index: 10;

		.title {
			margin-left: 10rpx;
			color: #333;
			font-size: 30rpx;
		}
	}

	.choose {
		width: 60rpx;
		height: 60rpx;

		> image {
			width: 100%;
			height: 100%;
		}
	}
</style>
